// pages/stats/stats.js
import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  let option = this.getData();
  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showText: false,
    ecLine: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
  },
  getData() {
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用后端数据

    // 这里开始我们假设已经从后端拿到了数据
    let color_arr = ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"];
    let series_data = [{
      value: 55,
      name: '奶茶'
    }, {
      value: 20,
      name: '交通'
    }, {
      value: 10,
      name: '烧烤'
    }, {
      value: 20,
      name: '旅游'
    }, {
      value: 38,
      name: '零食'
    }];
    // 获取组件
    let ecComponent = this.selectComponent('#mychart-dom-pie');
    ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      //调用设定EChart报表状态的函数，并且把从后端拿到的数据传过去
      this.setOption(chart, color_arr, series_data);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });

    //   }
    // })

  },
  //设定EChart报表的状态
  setOption(chart, color_arr, series_data) {
    var option = {
      tooltip:{},
      color: color_arr,
      series: [{
        label: {
          normal: {
            fontSize: 14
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['40%', '60%'],
        data: series_data
      }]
    };
    chart.setOption(option);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '快来看帅哥做的记账本!!!',
      path: '/pages/index/index',
      // 设置转发的图片
      imageUrl: 'https://mp-f3b68706-562e-4e88-9436-5e8c05efc576.cdn.bspapp.com/cloudstorage/7ab9bb73-6f8d-4e85-8b9e-983561662fed.png',
      // 成功的回调
      success: (res) => {
        wx.showToast({
          title: '分享成功！',
          icon: 'success',
          duration: 1500,
        });
      },
      // 失败的回调
      fail: (res) => { },
      // 无论成功与否的回调
      complete: (res) => { }
    }
  }
})